<template>
    <div>
        <div class="container">
            <div class="detail-top-left">
                <img :src="projectItem.projectImg">
                <div class="ys-ul clearfix">
                    <li><i class="el-icon-circle-check"></i>未约可退</li>
                    <li><i class="el-icon-circle-check"></i>民营医院</li>
                    <li><i class="el-icon-circle-check"></i>免费改期</li>
                    <li><i class="el-icon-circle-check"></i>检后咨询</li>
                    <li><i class="el-icon-circle-check"></i>报告权威</li>
                    <li><i class="el-icon-circle-check"></i>设备先进</li>
                    <li><i class="el-icon-circle-check"></i>优质服务</li>
                    <li><i class="el-icon-circle-check"></i>医疗团队</li>
                </div>
            </div>
            
            <div style="text-align: left">
                <p class="title">{{ projectItem.projectName }}项目</p>
                <p class="price">{{ projectItem.projectPrice }}￥</p>       
                <p class="intro">{{ projectItem.projectIntro }}</p> 
                <p class="getDetail">检测细项：{{ getDetail }}</p>
                <div class="infoDetail">
                    <p><i class="el-icon-timer"></i>创建时间：{{ projectItem.projectCreateTime }}</p>
                    <p><i class="el-icon-user"></i>适合人群：全部人群</p>
                    <p><i class="el-icon-first-aid-kit"></i>体检机构：中国福建省健景体检中心</p>
                    <p><i class="el-icon-map-location"></i>体检地址：中国福建省云隐康谷</p>
                    <p><i class="el-icon-time"></i>体检时间：全天通可</p>
                </div>
                <button @click="addShop" class="add">加入购物车</button>
                <button @click="buy" class="buy">立即预定</button>
            </div>
        </div>
        <hr class="hr-space-square">
        <div class="title2">>> 包含细项详情表</div>
        <template>
            <el-table
                :data="details"
                style="width: 90%;margin-left: 5%"
                :row-class-name="tableRowClassName"
                :header-cell-style="rowClass">
                <el-table-column
                prop="detailsId"
                label="细项id"
                width="180">
                </el-table-column>
                <el-table-column
                prop="detailsName"
                label="细项名称"
                width="180">
                </el-table-column>
                <el-table-column
                prop="detailsUnit"
                label="单位"
                width="180">
                </el-table-column>
                <el-table-column
                prop="detailsUp"
                label="上限"
                width="180">
                </el-table-column>
                <el-table-column
                prop="detailsDown"
                label="下限"
                width="180">
                </el-table-column>
                <el-table-column
                prop="detailsUpdateTime"
                label="更新时间"
                width="180">
                </el-table-column>
            </el-table>
        </template>
        <hr class="hr-space-square">
        <div class="title2">>> 预约须知</div>
        <div class="process-inner">
            <ol>
                <li>
                    <h4>预约时间</h4>
                    <p>该医院支持提前2天，周六可约，周日可约，若支持当天预约请于当天08:30前下单</p>
                </li>
                <li>
                    <h4>营业时间</h4>
                    <p>全天</p>
                </li>
                <li>
                    <h4>体检地点</h4>
                    <p>中国福建省云隐康谷</p>
                </li>
                <li>
                    <h4>体检凭证</h4>
                    <p>体检当天凭借预约成功短信，现场出示身份证即可体检</p>
                </li>
                <li>
                    <h4>优惠信息</h4>
                    <p>会员在线支付时含“立减”字样的套餐，付款时会自动抵扣掉对应的金额。</p>
                </li>
                <li>
                    <h4>订单退改</h4>
                    <p>如客户预约成功后选择退款，需扣除套餐实付金额的10%作为服务费。最高扣款金额不超过100元。</p>
                </li>
                <li>
                    <h4>注意事项</h4>
                    <p>您预约套餐时，即表示接受检测的所有项目。如因自身原因放弃体检套餐中的检查项目，网站将不予退款处理。</p>
                </li>
                <li>
                    <h4>发票申请</h4>
                    <p>请在体检后到“我的订单”中申请，如需了解开票具体流程，可在提交订单后及时联系健景体检网客服。</p>
                </li>
            </ol>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            projectItem:[],
            getDetail:"",
            details:[],
            total:0,
        }
    },
    created(){
        this.projectItem = JSON.parse(localStorage.getItem("projectItem"));
        console.log("projectItem",this.projectItem)
        this.total = this.projectItem.projectPrice
        this.getDetailsName();
        this.getDetails();
    },
    methods:{
        getDetailsName(){
            this.$axios.get(
                '/detail/getDetailsName',
                {
                    params:{id:this.projectItem.projectId}
                }
            ).then(res=>{
                if(res!=undefined){
                    this.getDetail=res.data
                    if(this.getDetail==""){
                        this.getDetail="暂无细项"
                    }
                }
            })
        },
        getDetails(){
            this.$axios.get(
                '/detail/getDetails',
                {
                    params:{id:this.projectItem.projectId}
                }
            ).then(res=>{
                if(res!=undefined){
                    this.details=res.data
                }
            })
        },
        tableRowClassName({row, rowIndex}) {
            if (rowIndex % 2 === 0) {
                return 'warning-row';
            } else if (rowIndex % 2 === 1) {
                return 'success-row';
            }
        },
        rowClass({ rowIndex, columnIndex }) {
            return {background:'rgb(19, 161, 100)',color:'white'}
        },
        addShop(){
            //添加项目的购物车，将用户id和项目id存入数据库中
            this.$axios.get(
                "/shop/addShopProject",
                {
                    params:{
                        patientId:this.$store.state.patientId,
                        projectId:this.projectItem.projectId,
                    }
                }
            ).then(res=>{
                // console.log(res)

                if(res != undefined){
                    if(res.code == 1){
                        this.$message({
                            showClose: true,
                            message: '加入购物车成功',
                            type: 'success'
                        });
                    }else{
                        this.$message.error("该商品已经添加过咯！")
                    }
                }
            })
        },
        buy(){
            this.$confirm('确定下单嘛？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if(this.$store.state.patientMoney >= this.total){
                    this.$notify({
                        title: '商品购买',
                        showClose: true,
                        message: '商品下单成功！！！待收费员确认信息之后打印体检信息',
                        type: 'success'
                    });
                    this.addOrder()
                    this.money();

                }else{
                    this.$message.error("当前余额不足，请充值！")
                }
            }).catch(() => {
                this.$message({
                    showClose: true,
                    type: 'info',
                    message: '已取消购买'
                });          
            });
        },
        addOrder(){
            //订单编号
            const examId = new Date().getTime()
            this.$axios.get(
                '/order/addOrder',
                {
                    params:{
                        examId:examId,
                        patientId:this.$store.state.patientId,
                        totalMoney:this.total,
                        orderInfo:this.projectItem.projectName ,
                        proOrCom:1,
                        adminId:3

                    }
                }
            ).then(res=>{
                console.log(res)
            })
        },
        money(){
            this.$axios.get(
                '/order/money',
                {
                    params:{
                        id:this.$store.state.patientId,
                        total:this.total
                    }
                }
            ).then(res=>{
                if(res != undefined){
                    this.$store.state.patientMoney = res.data
                }
            })
        }           
    },
}
</script>
<style scoped>
.el-table >>> .warning-row {
  background: rgb(212, 245, 229);
}
.el-table >>> .success-row {
  background: #a0f4ca;
}
 @import "../../static/css/detail.css";
</style>
